<template>
  <div class="vue-store clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">依赖引入</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install vuex --save-dev<br>
            新建store.js
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">state</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            const state = {<br>
              &nbsp;&nbsp;//定义数据 --- 类似data<br>
              &nbsp;&nbsp;num: 12  //生成了一个静态的常量<br>
            }<br>
            //  取值<br>
            this.$store.state.num
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">mutations</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 同步状态
            const mutations = {<br>
             //定义方法 --- 类似methods<br>
              &nbsp;&nbsp;add(state,val){//state 是把上面的数据引入进来的<br>
                &nbsp;&nbsp;&nbsp;&nbsp;state.num++;<br>
              &nbsp;&nbsp;}<br>
            }<br>
            //  使用<br>
            this.$store.commit("add",val)
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">actions</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 异步状态
            const actions = {<br>
              &nbsp;&nbsp;//context代表了整个的store<br>
              &nbsp;&nbsp;addPlus(context){<br>
                &nbsp;&nbsp;&nbsp;&nbsp;context.commit('add',{a:2}); //每次加2<br>
              &nbsp;&nbsp;},<br>
              &nbsp;&nbsp;minusPlus({commit}){//commit<br>
                &nbsp;&nbsp;&nbsp;&nbsp;commit('add')<br>
              &nbsp;&nbsp;}<br>
            }<br>
            // 使用<br>
            this.$store.dispatch('minusPlus');
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">组件实时赋值</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            computed: {<br>
              &nbsp;&nbsp;isActive () {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;return this.$store.state.isActive<br>
              &nbsp;&nbsp;}<br>
            }
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">vuex持久化</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install vuex-persistedstate --save-dev<br>
            <br>
            export default new Vuex.Store({<br>
              &nbsp;&nbsp;state,<br>
              &nbsp;&nbsp;mutations,<br>
              &nbsp;&nbsp;actions,<br>
              &nbsp;&nbsp;plugins: [createPersistedState()]<br>
            })
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'VueStore'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-store{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
